<template>
    <div class="dashboard">
        <el-row :gutter="20" class="dashboard-cards">
            <el-col :span="6">
                <el-card>
                    <div class="card-title">总用户数</div>
                    <div class="card-value">24,832 <span class="card-up">↑12.5%</span></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-title">本周活跃用户</div>
                    <div class="card-value">8,642 <span class="card-up">↑8.2%</span></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-title">总收入</div>
                    <div class="card-value">¥198,432 <span class="card-down">↓3.1%</span></div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card>
                    <div class="card-title">任务完成率</div>
                    <div class="card-value">86% <span class="card-up">↑4.3%</span></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="16">
                <el-card>
                    <div class="section-title">用户增长趋势</div>
                    <div ref="lineChart" style="height: 300px;"></div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card>
                    <div class="section-title">用户分布</div>
                    <div ref="pieChart" style="height: 300px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <!-- 新增：快捷操作、日历、待办事项三块内容 -->
        <el-row :gutter="20" style="margin-top: 20px;" align="top">
            <el-col :span="8">
                <el-card style="min-height: 450px; display: flex; flex-direction: column; justify-content: flex-start;">
                    <div class="stats-title">系统统计</div>
                    <div class="stats-content">
                        <div class="stat-item">
                            <div class="stat-icon user-icon">
                                <el-icon><User /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">{{ statsData.totalUsers }}</div>
                                <div class="stat-label">总用户数</div>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-icon role-icon">
                                <el-icon><Setting /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">{{ statsData.totalRoles }}</div>
                                <div class="stat-label">角色数量</div>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-icon permission-icon">
                                <el-icon><Lock /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">{{ statsData.totalPermissions }}</div>
                                <div class="stat-label">权限数量</div>
                            </div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-icon system-icon">
                                <el-icon><Tools /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">{{ statsData.totalConfigs }}</div>
                                <div class="stat-label">系统配置</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="min-height: 450px; display: flex; justify-content: center; align-items: center;">
                    <div style="background: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 280px; text-align: center;">
                        <div style="text-align: center; margin-bottom: 25px;">
                            <h3 style="color: #303133; margin: 0; font-size: 18px; font-weight: 600;">八月 2025</h3>
                        </div>
                        <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 20px; justify-items: center;">
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">一</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">二</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">三</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">四</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">五</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">六</div>
                            <div style="text-align: center; color: #909399; font-weight: 500; padding: 8px; font-size: 14px;">日</div>
                        </div>
                        <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; justify-items: center; align-items: center;">
                            <div style="text-align: center; padding: 8px; color: #c0c4cc;"></div>
                            <div style="text-align: center; padding: 8px; color: #c0c4cc;"></div>
                            <div style="text-align: center; padding: 8px; color: #c0c4cc;"></div>
                            <div style="text-align: center; padding: 8px; color: #c0c4cc;"></div>
                            <div style="text-align: center; padding: 8px; background: #409eff; color: white; border-radius: 50%; width: 32px; height: 32px; line-height: 32px; margin: 0 auto; font-weight: 600; font-size: 14px; display: flex; justify-content: center; align-items: center;">1</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">2</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">3</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">4</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">5</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">6</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">7</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">8</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">9</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">10</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">11</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">12</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">13</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">14</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">15</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">16</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">17</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">18</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">19</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">20</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">21</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">22</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">23</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">24</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">25</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">26</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">27</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">28</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">29</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">30</div>
                            <div style="text-align: center; padding: 8px; color: #303133; font-size: 14px;">31</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card style="min-height: 450px; display: flex; flex-direction: column;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h3 style="color: #303133; margin: 0; font-size: 16px; font-weight: 600;">待办事项</h3>
                        <span style="color: #409eff; font-size: 12px; cursor: pointer;">全部</span>
                    </div>
                    <div style="flex: 1; overflow-y: auto; max-height: 320px; padding-right: 8px;">
                        <div v-for="(item, idx) in filteredTodos" :key="idx" style="margin-bottom: 12px; padding: 12px; border-radius: 6px; background: #f5f7fa;">
                            <div style="display: flex; align-items: center; justify-content: space-between;">
                                <div style="display: flex; align-items: center; gap: 10px;">
                                    <el-checkbox v-model="item.done" :disabled="item.status === 'done'" style="margin: 0;"></el-checkbox>
                                    <span :style="{ color: '#303133', fontSize: '14px', textDecoration: item.done ? 'line-through' : 'none', opacity: item.done ? '0.6' : '1' }">
                                        {{ item.text }}<span v-if="item.count" style="color: #909399;">（{{ item.count }}）</span>
                                    </span>
                                </div>
                                <span :style="{ 
                                    color: item.status === 'delay' ? '#f56c6c' : item.status === 'done' ? '#909399' : '#67c23a', 
                                    fontSize: '12px', 
                                    fontWeight: '500',
                                    padding: '2px 6px',
                                    borderRadius: '4px',
                                    background: item.status === 'delay' ? '#fef0f0' : item.status === 'done' ? '#f4f4f5' : '#f0f9ff'
                                }">{{ statusText(item) }}</span>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 15px; display: flex; gap: 8px;">
                        <el-input v-model="newTaskText" placeholder="添加新任务..." size="small" style="flex: 1;" @keyup.enter="addTask"></el-input>
                        <el-button type="primary" size="small" @click="addTask" style="padding: 8px 12px;">
                            <el-icon><Plus /></el-icon>
                        </el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'
import { User, Setting, Lock, Tools, Plus } from '@element-plus/icons-vue'
import request from '@/utils/request'

const router = useRouter()
const lineChart = ref(null)
const pieChart = ref(null)

// 统计数据
const statsData = ref({
    totalUsers: 0,
    totalRoles: 0,
    totalPermissions: 0,
    totalConfigs: 0
})

// 加载状态
const statsLoading = ref(false)

// 获取统计数据
const fetchStatsData = async () => {
    try {
        statsLoading.value = true
        
        // 并行调用所有API获取数据
        const [usersResponse, rolesResponse, permissionsResponse, configsResponse] = await Promise.all([
            request.get('/users'),
            request.get('/roles'),
            request.get('/permissions'),
            request.get('/system/configs')
        ])
        
        // 检查响应格式并统计数量
        const stats = {
            totalUsers: 0,
            totalRoles: 0,
            totalPermissions: 0,
            totalConfigs: 0
        }
        
        // 检查用户数据
        if (usersResponse && usersResponse.code === 200) {
            if (Array.isArray(usersResponse.data)) {
                stats.totalUsers = usersResponse.data.length
            } else if (usersResponse.data && Array.isArray(usersResponse.data.items)) {
                stats.totalUsers = usersResponse.data.items.length
            }
        }
        
        // 检查角色数据
        if (rolesResponse && rolesResponse.code === 200) {
            if (Array.isArray(rolesResponse.data)) {
                stats.totalRoles = rolesResponse.data.length
            } else if (rolesResponse.data && Array.isArray(rolesResponse.data.items)) {
                stats.totalRoles = rolesResponse.data.items.length
            }
        }
        
        // 检查权限数据
        if (permissionsResponse && permissionsResponse.code === 200) {
            if (Array.isArray(permissionsResponse.data)) {
                stats.totalPermissions = permissionsResponse.data.length
            } else if (permissionsResponse.data && Array.isArray(permissionsResponse.data.items)) {
                stats.totalPermissions = permissionsResponse.data.items.length
            }
        }
        
        // 检查系统配置数据
        if (configsResponse && configsResponse.code === 200) {
            if (Array.isArray(configsResponse.data)) {
                stats.totalConfigs = configsResponse.data.length
            } else if (configsResponse.data && Array.isArray(configsResponse.data.items)) {
                stats.totalConfigs = configsResponse.data.items.length
            }
        }
        statsData.value = stats
        
    } catch (error) {
        console.error('获取统计数据失败:', error)
        // 如果API不存在，使用默认数据
        statsData.value = {
            totalUsers: 0,
            totalRoles: 0,
            totalPermissions: 0,
            totalConfigs: 0
        }
    } finally {
        statsLoading.value = false
    }
}

// 初始化默认数据
const initDefaultStats = () => {
    statsData.value = {
        totalUsers: 0,
        totalRoles: 0,
        totalPermissions: 0,
        totalConfigs: 0
    }
}

// 初始化图表
const initCharts = () => {
    setTimeout(() => {
        // 折线图
        const line = echarts.init(lineChart.value)
        line.setOption({
            tooltip: { trigger: 'axis' },
            legend: { data: ['用户数', '角色数'] },
            xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
            yAxis: { type: 'value' },
            series: [
                { name: '用户数', type: 'line', data: [120, 132, 101, 134, 90, 230] },
                { name: '角色数', type: 'line', data: [220, 182, 191, 234, 290, 330] }
            ]
        })
        
        // 环形图
        const pie = echarts.init(pieChart.value)
        pie.setOption({
            tooltip: { trigger: 'item' },
            legend: { bottom: 0 },
            series: [
                {
                    name: '用户分布',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: { show: false, position: 'center' },
                    emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
                    data: [
                        { value: 1048, name: '直接访问' },
                        { value: 735, name: '搜索引擎' },
                        { value: 580, name: '社交媒体' },
                        { value: 484, name: '邮件营销' },
                        { value: 300, name: '推广活动' }
                    ]
                }
            ]
        })
    })
}

// 初始化日历
const initCalendar = () => {
    // 日历初始化逻辑
}

// 初始化待办事项
const initTodos = () => {
    // 待办事项初始化逻辑
}

// 日历
const calendarDate = ref(new Date())
// v-calendar 示例属性（可高亮今日/自定义样式）
const calendarAttrs = [
    {
        key: 'today',
        highlight: true,
        dates: new Date(),
        popover: {
            label: '今天'
        }
    }
]
// v-calendar 主题色
const calendarTheme = {
    color: '#409EFF', // 主色
    isDark: false,
    // 你可以自定义更多属性，如 backgroundColor, border, etc.
    // 参考官方文档 https://vcalendar.io/theme-config.html
}
// 待办事项
const todoList2 = ref([
    { text: '审核新用户注册', count: 5, status: 'today', done: false },
    { text: '更新系统文档', status: 'tomorrow', done: false },
    { text: '响应用户反馈', count: 3, status: 'delay', done: false },
    { text: '完成周报', status: 'done', done: true },
    { text: '准备月度会议', status: 'nextweek', done: false }
])
const filterType = ref('all')
const newTaskText = ref('')



const filteredTodos = computed(() => {
    // 预留筛选，当前只做全部
    return todoList2.value
})

function statusText(item) {
    if (item.status === 'today') return '今天'
    if (item.status === 'tomorrow') return '明天'
    if (item.status === 'delay') return '延期'
    if (item.status === 'done') return '已完成'
    if (item.status === 'nextweek') return '下周一'
    return ''
}
function onCheck(item) {
    if (item.done) item.status = 'done'
    else item.status = 'today' // 可根据实际业务调整
}
function addTask() {
    if (!newTaskText.value || typeof newTaskText.value !== 'string' || !newTaskText.value.trim()) return
    todoList2.value.push({ text: newTaskText.value.trim(), status: 'today', done: false })
    newTaskText.value = ''
}

onMounted(() => {
    // 立即初始化默认数据，让界面快速显示
    initDefaultStats()
    
    // 异步加载真实数据
    setTimeout(() => {
        fetchStatsData()
    }, 100)
    
    // 初始化图表
    initCharts()
    
    // 初始化日历
    initCalendar()
    
    // 初始化待办事项
    initTodos()
})
</script>

<style scoped>
.dashboard {
    padding: 20px;
    background: #f5f6fa;
    overflow-x: hidden;
}

:global(body) {
    overflow-x: hidden;
}

.dashboard-cards .el-card {
    text-align: center;
    min-height: 110px;
}

.card-title {
    color: #888;
    font-size: 15px;
    margin-bottom: 8px;
}

.card-value {
    font-size: 28px;
    font-weight: bold;
    color: #222;
}

.card-up {
    color: #67c23a;
    font-size: 14px;
    margin-left: 8px;
}

.card-down {
    color: #f56c6c;
    font-size: 14px;
    margin-left: 8px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
}

.quick-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 16px;
}

.quick-actions-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    align-items: center;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: #409EFF;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    border: none;
    width: auto;
    min-width: 200px;
    box-sizing: border-box;
}

.quick-action-btn:hover {
    background: #36a3f7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.quick-action-btn:active {
    transform: translateY(0);
}

.quick-action-btn .el-icon {
    font-size: 16px;
    margin-right: 12px;
    color: white;
}

.common-features {
    margin-top: 16px;
}

.common-feature-btn {
    display: inline-block;
    background: #f5f7fa;
    color: #606266;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.common-feature-btn:hover {
    background: #409EFF;
    color: white;
    border-color: #409EFF;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.common-feature-btn.active {
    background: #409EFF;
    color: white;
    border-color: #409EFF;
}

.dashboard-align-row {
    min-height: 420px;
}

.calendar-wrapper {
    width: 100%;
    height: 100%;
    min-height: 360px;
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 0;
}

:deep(.vc-container) {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px;
    border-radius: 12px;
}

:deep(.vc-day-content.vc-highlight) {
    background: #409EFF !important;
    color: #fff !important;
    border-radius: 50% !important;
}

:deep(.vc-day-content.vc-today) {
    border: 2px solid #409EFF !important;
}

.todo-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.todo-title {
    font-size: 22px;
    font-weight: bold;
}

.todo-filter {
    color: #409EFF;
    font-size: 15px;
    cursor: pointer;
    margin-left: 8px;
}

.todo-filter.active {
    font-weight: bold;
    text-decoration: underline;
}

.todo-list2 {
    margin-bottom: 8px;
    height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.todo2-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.todo2-item:last-child {
    border-bottom: none;
}

.todo2-text {
    font-size: 16px;
    color: #222;
}

.todo2-text.done {
    color: #bbb;
    text-decoration: line-through;
}

.todo2-status {
    font-size: 15px;
    margin-left: 12px;
    min-width: 44px;
    text-align: right;
}

.todo2-status.today {
    color: #409EFF;
}

.todo2-status.tomorrow {
    color: #909399;
}

.todo2-status.delay {
    color: #f56c6c;
}

.todo2-status.done {
    color: #bbb;
}

.todo2-status.nextweek {
    color: #909399;
}

.todo2-divider {
    border-top: 1px solid #f0f0f0;
    margin: 10px 0 8px 0;
}

.todo2-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo2-input {
    flex: 1;
}

.todo2-add-btn {
    margin-left: 0;
}

.stats-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 16px;
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.stat-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #409EFF;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: #f0f2f5;
    transform: translateX(4px);
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-right: 16px;
    font-size: 20px;
    color: white;
}

.user-icon {
    background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
}

.role-icon {
    background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
}

.permission-icon {
    background: linear-gradient(135deg, #e6a23c 0%, #f0ad4e 100%);
}

.system-icon {
    background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
}

.stat-info {
    flex: 1;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    color: #606266;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .dashboard-cards .el-col {
        margin-bottom: 20px;
    }
    
    .dashboard-cards .el-col:nth-child(1),
    .dashboard-cards .el-col:nth-child(2),
    .dashboard-cards .el-col:nth-child(3),
    .dashboard-cards .el-col:nth-child(4) {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .dashboard {
        padding: 10px;
        margin-left: 0; /* 移除左边距，因为侧边栏被隐藏了 */
        margin-top: 0; /* 移除顶部边距，因为主布局已经处理了 */
    }
    
    .dashboard-cards .el-col {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
    
    .dashboard-cards .el-col:nth-child(1),
    .dashboard-cards .el-col:nth-child(2),
    .dashboard-cards .el-col:nth-child(3),
    .dashboard-cards .el-col:nth-child(4) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* 图表区域响应式 */
    .el-row .el-col:nth-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .el-row .el-col:nth-child(2) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* 三栏布局响应式 */
    .el-row .el-col:nth-child(1),
    .el-row .el-col:nth-child(2),
    .el-row .el-col:nth-child(3) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    /* 卡片样式调整 */
    .el-card {
        margin-bottom: 15px;
    }
    
    /* 统计卡片调整 */
    .stats-content {
        padding: 12px;
        gap: 12px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-right: 12px;
    }
    
    .stat-value {
        font-size: 20px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    /* 日历调整 */
    .el-card div[style*="width: 280px"] {
        width: 100% !important;
        max-width: 320px !important;
    }
    
    /* 待办事项调整 */
    .el-card div[style*="overflow-y: auto"] {
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    .dashboard {
        padding: 5px;
        margin-left: 0;
        margin-top: 0; /* 移除顶部边距 */
    }
    
    .card-title {
        font-size: 13px;
    }
    
    .card-value {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 14px;
    }
    
    .stats-title {
        font-size: 16px;
    }
    
    .stat-value {
        font-size: 18px;
    }
    
    .stat-label {
        font-size: 11px;
    }
}
</style>